<template>
  <div class="vanilla">
    <div class="profit">
      <div class="profit-head">盈利案例</div>
      <div class="profit-main">
        <el-carousel indicator-position="none" arrow="always" :autoplay="false">
          <el-carousel-item v-for="(item,index) in rize" :key="index">
            <div class="list" v-for="itemC in item" :key="itemC.id">
              <div class="list-head">
                <div class="sign">盈</div>
                <div class="share">分享</div>
              </div>
              <div class="list-firstmain">
                <p class="bond">
                  <span>{{ itemC.name }}</span>
                  <span>{{ item.stockcode }}</span>
                </p>
                <p class="Increase">
                  <span>{{ itemC.pinghangdian }}</span>
                  <span>{{ itemC.zhangfu }}</span>
                </p>
                <p class="type">
                  <span>香草</span>
                  <span>{{itemC.aliasname}}{{ itemC.cycle }}</span>
                </p>
                <p class="edit">
                  <span>日期:{{ $dayjs(itemC.start_date*1000).format("YYYY/MM/DD") }}</span>
                  <span>价格:{{ itemC.qichujiage}}</span>
                </p>
                <p class="edit">
                  <span>规模:{{itemC.cunxuguimo}}</span>
                  <span>费率:{{ itemC.qiquanfeilv }}%</span>
                </p>
              </div>
              <div class="list-secondmain">
                <p class="income">
                  <span>股票涨幅</span>
                  <span>{{itemC.profit }}%</span>
                </p>
                <p class="income">
                  <span>行权应收</span>
                  <span>{{ itemC.xingquanyingshou }}</span>
                </p>
                <p class="income">
                  <span>浮动盈利</span>
                  <span>{{itemC.fudongyingli}}W</span>
                </p>
                <p class="income">
                  <span>利润率</span>
                  <span>{{itemC.lirunlv}}%</span>
                </p>
              </div>
              <div class="list-lastmain">
                <p>距离到期日{{ $dayjs(itemC.end_date*1000).format("YYYY/MM/DD") }} 还有</p>
                <p>
                  <Statistic
                    :value="getData(itemC.end_date*1000)"
                    time-indices
                    :format="'DD HH:mm:ss'"
                  ></Statistic>
                </p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="loss">
      <div class="loss-head">亏损案例</div>
      <div class="loss-main">
        <div class="loss-main">
          <el-carousel indicator-position="none" arrow="always" :autoplay="false">
            <el-carousel-item v-for="(item,index) in fall" :key="index">
              <div class="list" v-for="itemC in item" :key="itemC.id">
                <div class="list-head">
                  <div class="sign">亏</div>
                  <div class="share">分享</div>
                </div>
                <div class="list-firstmain">
                  <p class="bond">
                    <span>{{ itemC.name }}</span>
                    <span>{{ item.stockcode }}</span>
                  </p>
                  <p class="Increase">
                    <span>{{ itemC.pinghangdian }}</span>
                    <span>{{ itemC.zhangfu }}</span>
                  </p>
                  <p class="type">
                    <span>香草</span>
                    <span>{{itemC.aliasname}}{{ itemC.cycle }}</span>
                  </p>
                  <p class="edit">
                    <span>日期:{{ $dayjs(itemC.start_date*1000).format("YYYY/MM/DD") }}</span>
                    <span>价格:??</span>
                  </p>
                  <p class="edit">
                    <span>规模:{{itemC.cunxuguimo}}</span>
                    <span>费率:{{ itemC.qiquanfeilv }}%</span>
                  </p>
                </div>
                <div class="list-secondmain">
                  <p class="income">
                    <span>股票涨幅</span>
                    <span>{{itemC.profit }}%</span>
                  </p>
                  <p class="income">
                    <span>行权应收</span>
                    <span>{{ itemC.xingquanyingshou }}</span>
                  </p>
                  <p class="income">
                    <span>浮动盈利</span>
                    <span>{{itemC.fudongyingli}}W</span>
                  </p>
                  <p class="income">
                    <span>利润率</span>
                    <span>{{itemC.lirunlv}}%</span>
                  </p>
                </div>
                <div class="list-lastmain">
                  <p>距离到期日{{ $dayjs(itemC.end_date*1000).format("YYYY/MM/DD") }} 还有</p>
                  <p>
                    <Statistic
                      :value="getData(itemC.end_date*1000)"
                      time-indices
                      :format="'DD HH:mm:ss'"
                    ></Statistic>
                  </p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Statistic } from "element-ui";
import { stock_case } from "../../api/case/index.js";
export default {
  components: {
    Statistic
  },
  data() {
    return {
      deadline4: "",
      rize: [],
      fall: []
    };
  },
  mounted() {
    this.getstock_case();
  },
  methods: {
    async getstock_case() {
      const { data } = await stock_case();
      this.rize = data.rize;
      this.fall = data.fall;
    },
    getData(item) {
      return item;
    }
  }
};
</script>

<style lang="less" scoped>
.vanilla {
  width: 100%;
  height: 100%;
  .profit,
  .loss {
    width: 100%;
    // height: 50%;
    height: 490px;
    &-head {
      height: 40px;
      padding-left: 48px;
      line-height: 60px;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 3px;
        height: 20px;
        background: #3377ff;
        position: absolute;
        left: 40px;
        top: 20px;
      }
    }
    &-main {
      width: 100%;
      // height: calc(100% - 40px);
      height: 450px;
      /deep/ .el-carousel {
        width: 100%;
        height: 100%;
        &__container {
          width: 100%;
          height: 100%;
        }
        &__item {
          height: 100%;
          padding: 0 55px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          .list {
            width: 286px;
            height: 414px;
            background: #ffffff;
            opacity: 0.82;
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            &-head {
              width: calc(100% - 28px);
              margin: 24px 14px 0px;
              display: flex;
              justify-content: space-between;
              .sign {
                width: 22px;
                text-align: center;
                height: 22px;
                border: 2px solid #f52a40;
                font-size: 16px;
                color: #f52a40;
                line-height: 22px;
              }
              .share {
                width: 47px;
                height: 18px;
                background: rgba(51, 119, 255, 0.2);
                border-radius: 20px;
                font-size: 12px;
                color: #3377ff;
                text-align: center;
              }
            }
            &-firstmain,
            &-secondmain {
              width: 200px;
              height: 128px;
              border-bottom: 1px dashed #ccc;
              text-align: center;
              padding-bottom: 10px;
              box-sizing: border-box;
              p {
                margin: 0;
              }
              .bond {
                color: #343235;
                font-size: 20px;
                font-weight: 600;
                line-height: 35px;
                span:nth-child(1) {
                  margin-right: 10px;
                }
              }
              .Increase {
                color: #f52a40;
                font-size: 16px;
                span:nth-child(1) {
                  margin-right: 10px;
                }
              }
              .type {
                font-size: 20px;
                line-height: 35px;
                font-weight: 600;
                span:nth-child(1) {
                  font-weight: normal;
                  font-size: 16px;
                  margin-right: 10px;
                }
              }
              .edit {
                font-size: 12px;
                span:nth-child(1) {
                  margin-right: 10px;
                }
              }
              .income {
                line-height: 30px;
                text-align: left;
                span:nth-child(1) {
                  display: inline-block;
                  width: 60px;
                  text-align: left;
                  font-size: 12px;
                  color: #343235;
                }
                span:nth-child(2) {
                  font-size: 20px;
                  color: #f52a40;
                  font-weight: 600;
                }
              }
            }
            &-lastmain {
              width: 200px;
              height: 108px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .loss {
    .sign {
      color: #09ad4c !important;
      border-color: #09ad4c !important;
    }
    .Increase {
      color: #09ad4c !important;
    }
    .income {
      span:nth-child(2) {
        color: #09ad4c !important;
      }
    }
  }
}
</style>